<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>源码字节</title>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
    <link rel="icon" th:href="@{/static/favicon.ico}"/>
</head>
<style>
    body {
        scroll: "no";
        scroll: "auto";
        overflow-x: hidden;
        overflow-y: hidden;
    }
</style>
<body>
<div id="app">
    <template>
        <el-container class="index-container">
            <el-header class="index-header">
                <div class="" style="text-align: center;width: 200px;font-weight: bold;font-size: 20px">
                    {{systemName}}
                </div>
                <div class="index-userInfo">
                    <el-avatar icon="el-icon-user-solid" size="medium" :src="avatar"
                               style="margin-right: 10px"></el-avatar>

                    <span style="margin-right: 10px;">{{sysUser.realName}}</span>


                    <el-dropdown trigger="click" @command="handleCommand" style="margin-right: 10px; cursor: pointer">
                        <i class="el-icon-caret-bottom" style="color: white;font-size: 14px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="updateData">个人资料</el-dropdown-item>
                            <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </el-header>

            <el-container>

                <el-aside width="200px" class="index-aside" style="overflow-x: hidden">
                    <div style="width: 100%;color: white;font-size: 13px;text-align: center;margin-top: 10px;margin-bottom: 20px">
                        <img :src="avatar" style="width: 40%;height: 40%;border-radius: 40px;" class="rotate-image"
                             alt="">


                        <div style="margin-top: 10px">你好！{{sysUser.realName}}，欢迎登录</div>

                    </div>

                    <el-menu unique-opened background-color="#393d49" text-color="#fff" active-text-color="#ffffff"
                             :default-active="activePath" style="width: 200px">
                        <template v-for="(item,index) in sysMenu">
                            <el-submenu :key="index" :index="index+''">
                                <template slot="title"><i :class="item.icon"></i>{{item.menuName}}</template>
                                <el-menu-item v-for="child in item.children" :index="child.url"
                                              @click="addTab(child.menuName, child.url)">
                                    <template slot-scope="scope"><i :class="child.icon"></i>{{child.menuName}}
                                    </template>
                                </el-menu-item>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>

                <el-main>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"
                             @tab-click="clickTab" style="height: 100%;">
                        <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title"
                                     :name="item.name" style="height: 100%;">
                            <iframe :src="item.content" style="height: 100%;width: 100%;border: none;"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>

            </el-container>
        </el-container>

        <el-dialog title="个人资料" width="40%" :visible.sync="dataDialog" :modal="false" :close-on-click-modal="false">
            <el-form :model="dataForm" ref="dataForm" :rules="dataFormRules" label-width="100px">
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="dataForm.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthDate">
                    <el-date-picker v-model="dataForm.birthDate" type="date" placeholder="选择日期"
                                    style="width:100%"></el-date-picker>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="dataForm.phone" maxlength="11"></el-input>
                </el-form-item>

                <el-form-item label="地址">
                    <el-input v-model="dataForm.address"></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="avatar">
                    <el-upload class="avatar-uploader" :action="uploadUrl" :headers="uploadHeaders" :data="uploadData"
                               :show-file-list="false"
                               :on-success="handleAvatarSuccess.bind(this,'head')" :before-upload="beforeAvatarUpload">
                        <el-avatar v-if="dataForm.avatar" :src="dataForm.avatar"></el-avatar>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dataDialog = false">取 消</el-button>
                    <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="修改密码" width="40%" :visible.sync="pwdDialog" :modal="false" :close-on-click-modal="false">
            <el-form :model="pwdForm" ref="pwdForm" :rules="pwdFormRules" label-width="100px">
                <el-form-item label="旧密码" prop="oldPwd">
                    <el-input v-model="pwdForm.oldPwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd">
                    <el-input v-model="pwdForm.newPwd"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPwd">
                    <el-input v-model="pwdForm.confirmPwd"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="pwdDialog = false">取 消</el-button>
                    <el-button type="primary" @click="pwdFormSubmit">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/login.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>

<style>

    /*//显示时按钮样式*/
    .el-button--primary {
    / / 需要更改的按钮类型 background: rgb(122, 111, 190) !important;
        border-color: rgb(122, 111, 190) !important;
    }

    /*//移入时按钮样式*/
    .el-button--primary:hover {
        background: rgb(122, 111, 190) !important;
        border-color: rgb(122, 111, 190) !important;
        color: #FFF !important;
    }

    .el-menu-item.is-active {
        background-color: rgb(122, 111, 190) !important;
    }

    .el-tabs__item {
        padding: 0 5px;
        height: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 30px;
        display: inline-block;
        list-style: none;
        font-size: 13px;
        font-weight: 500;
        color: #303133;
        position: relative;
    }

    .el-tabs--card > .el-tabs__header {
        border-bottom: 1px solid #E4E7ED;
        background-color: #ffffff;
    }

    .el-tabs__item.is-active {
        color: #ffffff;
        background-color: rgb(122, 111, 190);
    }

    .el-tabs__item:hover {
        color: black;
        cursor: pointer;
    }

    .index-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .index-header {
        background-color: #23262E;
        color: #ffffff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: content-box;
        padding: 0px;
    }

    .index-aside {
        background-color: #393d49;
    }

    .index-title {
        color: #fff;
        font-size: 22px;
        display: inline;
        margin-left: 10px;

    }

    .index-userInfo {
        font-size: 14px;
        display: flex;
        align-items: center
    }

    .el-submenu .el-menu-item {
        width: 199px;
        min-width: 175px;
    }

    .rotate-image {
        animation: rotate 5s linear infinite; /* 使用 rotate 动画，持续时间为 5 秒，线性变化，无限循环 */
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg); /* 初始状态，无旋转 */
        }

        100% {
            transform: rotate(360deg); /* 最终状态，完全旋转一圈（360度）*/
        }
    }


</style>
</html>
